<template>
  <div class="aside">
    <div class="top-title">非IP矩阵管理后台</div>
    <el-divider></el-divider>
    <div style="height: 20px"></div>
    <!-- <div
      v-for="(item, index) in menuArr"
      :key="index"
      @click="changeRouter(item.path)"
    >
      <div :class="whichActive == item.path ? 'active' : ''">
        <div class="contenText">
          <img
            src="../../assets/image/home.png"
            v-if="item.path == 'home'"
            class="el-icon-menu iconstyle"
          />
          <img
            src="../../assets/image/menuCategory.png"
            v-if="item.path == 'control'"
            class="el-icon-s-cooperation iconstyle"
          />
          <img
            src="../../assets/image/user.png"
            v-if="item.path == 'user'"
            class="el-icon-user-solid iconstyle"
          />
          <img
            src="../../assets/image/setting.png"
            v-if="item.path == 'system'"
            class="el-icon-s-tools iconstyle"
          />
          {{ item.name }}
        </div>
      </div>
    </div> -->

    <el-menu
      default-active="home"
      class="el-menu-vertical-demo"
      background-color="#1e1f25"
      text-color="#757B8C"
      active-text-color="#FFFFFF"
      router
    >
      <!-- <template v-for="(item, index) in menuArr" :key="index">
        <el-menu-item v-if="!item.child" :index="item.path">
          <img
            :src="'../../assets/image/' + item.image"
            class="el-icon-menu iconstyle"
          />
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>

        <el-submenu v-else :index="item.path">
          <template slot="title">
            <img
              :src="'../../assets/image/' + item.image"
              class="el-icon-menu iconstyle"
            />
            <span slot="title">{{ item.name }}</span>
          </template>
          <el-menu-item
            v-for="(itemChild, ic) in item.child"
            :index="itemChild.path"
            :key="ic"
            class="active"
          >
            <span slot="title">{{ itemChild.name }}</span>
          </el-menu-item>
        </el-submenu>
      </template> -->

      <el-menu-item index="home">
        <img src="../../assets/image/home.png" class="el-icon-menu iconstyle" />
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="control" class="active">
        <img
          src="../../assets/image/menuCategory.png"
          class="el-icon-s-cooperation iconstyle"
        />
        <span slot="title">控制</span>
      </el-menu-item>
      <el-menu-item v-if="user.curd" index="user" class="active">
        <img
          src="../../assets/image/user.png"
          class="el-icon-user-solid iconstyle"
        />
        <span slot="title">用户配置</span>
      </el-menu-item>

      <el-submenu
        v-if="user.curd"
        index="system"
        popper-class="submenuSelf"
      >
        <template slot="title">
          <img
            src="../../assets/image/setting.png"
            class="el-icon-s-tools iconstyle"
          />
          <span slot="title">系统设置</span>
        </template>
        <el-menu-item index="system" class="active">
          <span slot="title">系统日志</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // whichActive: sessionStorage.getItem("whichMenu") || "home",
      // menuArr: JSON.parse(sessionStorage.getItem("menu")) || [],
      user: JSON.parse(sessionStorage.getItem("user")) || {},
    };
  },

  methods: {
    // changeRouter(path) {
    //   this.$router.push(`/changtu/${path}`);
    //   this.whichActive = path;
    //   // console.log(this.$route.name);
    //   sessionStorage.setItem("whichMenu", path);
    // },

  },
  // mounted() {
  //   console.log(this.menuArr);
  //   // this.whichActive = sessionStorage.getItem("whichMenu") || "home";
  // },
};
</script>

<style scoped lang="less">
.aside {
  // height: calc(100vh - 100px);
  width: 250px;
  // height: 1028px;
  // height: 100vh;
  background: #1e1f25;
  border-radius: 20px 20px 20px 20px;
  opacity: 1;
  display: flex;
  flex-direction: column;

  .top-title {
    height: 76px;
    width: 250px;
    font-size: 24px;
    font-family: Alibaba PuHuiTi 2-65 Medium, Alibaba PuHuiTi 20;
    font-weight: normal;
    color: #ffffff;
    line-height: 0px;
    cursor: default;
    justify-content: center;
  }

  div {
    // box-sizing: border-box;
    // width: 100%;
    // height: 100%;
    display: flex;
    align-items: center;
    // justify-content: center;

    cursor: pointer;

    width: 250px;
    height: 100px;
    background: #1e1f25;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    line-height: 0px;

    font-size: 24px;
    font-family: Alibaba PuHuiTi 2-65 Medium, Alibaba PuHuiTi 20;
    font-weight: normal;
    color: #757b8c;
    line-height: 0px;

    .contenText {
      padding-left: 32px;
    }
  }

  .active {
    .contenText {
      background-color: #282c37;
      color: #ffffff;
      img {
        color: #3169f4;
        // background-color: #3169f4;
      }
    }
  }

  /deep/ .el-divider {
    width: 247px;
    height: 0px;
    background: #ffffff;
    opacity: 1;
    border: 1px solid #282c38;
    cursor: default;
    padding: 0;
    margin: 0;
  }

  .iconstyle {
    width: 27px;
    height: 27px;
    margin-right: 15px;
  }
}

.el-menu {
  border-right: 0;
}

/deep/ .el-menu-item {
  height: 100px;
  line-height: 100px;
  font-size: 24px;
  font-family: Alibaba PuHuiTi 2-65 Medium, Alibaba PuHuiTi 20;
  font-weight: normal;
  color: #ffffff;
  // padding: 0 20px !important;
}

/deep/ .is-active {
  background-color: #282c38 !important;
}

/deep/ .el-submenu__title {
  height: 100px;
  padding: 0 20px !important;
  span {
    line-height: 100px;
    font-size: 24px;
    font-family: Alibaba PuHuiTi 2-65 Medium, Alibaba PuHuiTi 20;
    font-weight: normal;
  }
}

/deep/ .el-submenu .el-menu-item {
  padding: 0 30px;
  padding-left: 50px;
  font-size: 20px;
}
</style>
